<template>
<div>

	<el-card class="box-card" style="width:600px;">
		<div slot="header" class="clearfix">
			<span>修改密码</span>
		</div>
		<el-form ref="form" :rules="rules2" :model="form" label-width="180px">
			<el-form-item label="密码：" prop="pass">
				<el-input v-model="form.pass" style="width:300px;"></el-input>
			</el-form-item>
			<el-form-item label="确认密码：" prop="checkPass">
				<el-input v-model="form.checkPass" style="width:300px;"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit"> 保  存 </el-button>
			</el-form-item>
		</el-form>
	</el-card>

</div>
</template>

<script>


export default {
	
	name : 'modifyPassword',
	
	data () {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.form.checkPass !== '') {
					this.$refs.form.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
		  	form : {
		  		pass : '',
		  		checkPass : '',
		  	},

		  	rules2: {
				pass: [
					{ validator: validatePass, trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass2, trigger: 'blur' }
				],
			}
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		onSubmit () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$http({
						fun : 'modifyPassword',
						password : this.form.pass,
						cb : res => {
							this.$message.success('修改成功');
						},
						err : res => {
							this.$message.error(res);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
